<template>
  <div class="app">
    <dv-full-screen-container>
      <div class="warrper">
        <to-head-two :title="title" />
        <div class="content2">
          <div class="p_con1">
            <left :runorderlist="runorderlist"> </left>
          </div>
          <div class="p_con2">
            <num
              :yesterdaycount="yesterdaycount"
              :currentdaycount="currentdaycount"
            ></num>
          </div>
          <div class="p_con3">
            <lp-rate :hgl="hgl"></lp-rate>
          </div>
          <!-- 良品率 -->
        </div>
        <div class="product_bottom">
          <div class="p_bottom1">
            <table-list
              :headerList="tableHeader"
              :dataList="dataList"
            ></table-list>
          </div>
          <div class="p_bottom2">
            <eqment-bottom :opseqdetail="opseqdetail"> </eqment-bottom>
          </div>
          <div class="p_bottom3">
            <scrap-list
              :headerList="scrapHeader"
              :scrapList="scrapList"
            ></scrap-list>
          </div>
        </div>
        <!-- <div class="bottom"></div> -->
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import moment from 'moment'
// import { getStore, SPF } from '../utils/storage'
import Left from './components/product/left.vue'
import LpRate from './components/product/LpRate.vue'
import Num from './components/product/Num.vue'
import { queryProdChartByInv } from './api/dataApi'
import ToHeadTwo from './components/ToHeadTwo.vue'
import TableList from './components/product/TableList.vue'
import EqmentBottom from './components/product/EqmentBottom.vue'
import ScrapList from './components/product/ScrapList.vue'

// import moment from 'moment'

export default {
  name: 'App',
  components: {
    ToHeadTwo,
    Left,
    LpRate,
    Num,
    TableList,
    EqmentBottom,
    ScrapList,
  },
  data() {
    return {
      time: '',
      indexInv: 0,
      runorderlist: {},
      yesterdaycount: {}, //昨日订单统计
      currentdaycount: {}, //今日订单统计
      orderlist: [], //订单列表
      opseqdetail: [],
      title: '订单进度大屏',
      sumDayNum: {}, //中间数据
      sumDayReportNum: [], //左侧数据
      hgl: 0,
      dateList: [],
      countyCheckData: [],
      reportTwoData: [],
      tableHeader: ['订单号', '物料编号', '物料名称'],
      eqHeader: ['设备名称', '上工人', '工序名称', '设备状态'],
      scrapHeader: ['报废数', '报废原因', '报废人'],
      dataList: [],
      scrapList: [],
      invcode: '',
    }
  },
  props: {},
  watch: {
    // $route: {
    //   handler(val) {
    //     var vars = val.fullPath.split('&').join()
    //     console.log('vars', vars)
    //     var arr = vars.split('=')
    //     this.invcode = arr[1]
    //     this.getData()
    //     console.log('存货', this.invcode)
    //   },
    //   deep: true,
    //   // immediate: true
    // },
  },
  mounted() {
    // var query = window.location.search.substring(1)
    // var vars = query.split('&')
    // for (var i = 0; i < vars.length; i++) {
    //   var pair = vars[i].split('=')
    //   if (pair[0] == 'invcode') {
    //     this.invcode = pair[1]
    //   }
    // }

    this.time = moment().format('YYYY-MM-DD')
    this.getData()
    setInterval(() => {
      this.time = moment().format('YYYY-MM-DD')
      this.getData()
    }, 300000)
  },
  methods: {
    getData() {
      const that = this
      const params = {
        _params: JSON.stringify({
          currentday: that.time,
          // currentday: '2022-04-01',
          // invcode: that.invcode,
        }),
      }
      queryProdChartByInv(params)
        .then((res) => {
          if (String(res.code) === '0') {
            that.yesterdaycount = res.data.yesterdaycount //昨日订单统计
            that.currentdaycount = res.data.currentdaycount //今日订单统计
            that.opseqdetail = res.data.opseqdetail //当前上工人
            that.runorderlist = res.data.runorderlist //当前生产订单列表
            // that.hgl = res.data.currentdaycount.ywgqty
            //   ? (res.data.currentdaycount.ywgqty / 3008).toFixed(2) * 100
            //   : 0
            that.hgl = res.data.currentdaycount['hgl']
            //订单列表
            that.qThree(res.data.orderlist)
            that.qFour(res.data.scrapdetail)
          } else {
            that.$message.error(
              res.msg ? res.msg : '数据请求失败，请联系管理员！'
            )
          }
        })
        .catch(() => {
          that.$message.error('数据请求失败，请联系管理员！')
        })
    },
    qThree(reportData) {
      const _reportData = []
      reportData.forEach((reportItem) => {
        const _m = []
        _m.push(reportItem.mocode)
        _m.push(reportItem.invcode)
        _m.push(reportItem.invname)
        _reportData.push(_m)
      })
      this.dataList = _reportData
    },
    qFour(reportData) {
      const _reportData = []
      reportData.forEach((reportItem) => {
        const _m = []
        _m.push(reportItem.scrapqty)
        _m.push(reportItem.scrapreason)
        _m.push(reportItem.scrapusername)
        _reportData.push(_m)
      })
      this.scrapList = _reportData
    },
  },
}
</script>

<style lang="less" scoped>
.app {
  font-family: Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #fff;
  font-size: 14px;
  padding: 15px;
  box-sizing: border-box;
  /* margin-top: 60px; */
}

.border11 path {
  stroke-width: 1 !important;
}

.warrper {
  padding-left: 10px;
  padding-right: 10px;
}

// .content2 {
//   width: 100%;
//   display: grid;
//   grid-template-columns: 2fr 4fr 2fr;
//   column-gap: 10px;
//   grid-template-rows: 40vh;
// }

// .product_bottom {
//   margin-top: 3vh;
//   display: grid;
//   grid-template-columns: 2fr 4fr 2fr;
//   column-gap: 10px;
//   box-sizing: border-box;
//   grid-template-rows: 45vh;
// }
.content2 {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  padding-top: 1vh;
  height: 38vh;
  .p_con1 {
    width: 30%;
  }
  .p_con2 {
    width: 45%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .p_con3 {
    width: 25%;
  }
}
.product_bottom {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  height: 49vh;
  padding-top: 5vh;
  .p_bottom1 {
    width: 30%;
  }
  .p_bottom2 {
    width: 45%;
    padding-left: 8px;
    padding-right: 8px;
  }
  .p_bottom3 {
    width: 25%;
  }
}
.warrper ::v-deep .dv-scroll-board .rows .ceil {
  font-size: 13px !important;
}

.warrper ::v-deep .dv-scroll-board .header .header-item {
  font-size: 14px !important;
  color: #ccc;
}
</style>
